<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/mainWorkspace.css" />
    <link rel="stylesheet" href="css/rightColumn.css"/>
    <link rel="stylesheet" href="css/pagePreview.css" />
    <link rel="stylesheet" href="css/PropertyList.css" />
    <link rel="stylesheet" href="css/ElementsView.css" />
    <link rel="stylesheet" href="css/resourcesChooser.css"/>
    <link rel="stylesheet" href="lib/spectrum.css"/>

    <script src="lib/prototype.js"></script>

    <!-- Khai bao JQuery va JQueryUI -->
    <link rel="stylesheet" href="lib/jquery-ui.css" />
    <script src="lib/jquery-1.9.1.js"></script>
    <script src="lib/jquery-ui.js"></script>

    <script>
        var $j = jQuery.noConflict();
    </script>
    <script src="lib/jquery.json-2.4.js"></script>
    <!-- end -->
    <script src="lib/spectrum.js"></script>

    <!--Doan nay la cua ribbon-->
    <script src="menu/ribbon.js"></script>
    <link rel="stylesheet" href="menu/ribbon.css" />
    <link rel="stylesheet" href="menu/soft_button.css" />
    <!-- end -->

    <script src="classes/Static.js"></script>
    <script src="classes/Global.js"></script>
    <script src="classes/MyTools.js"></script>

    <script src="classes/MyAttribute.js"></script>
    <script src="classes/MyAttributeList.js"></script>

    <script src="classes/MyElement.js"></script>
    <script src="classes/MyImage.js"></script>
    <script src="classes/MyText.js"></script>
    <script src="classes/MyVideo.js"></script>
    <script src="classes/MyAudio.js"></script>

    <script src="classes/MyPage.js"></script>
    <script src="classes/MyBook.js"></script>
    <script src="classes/PropertyEditor.js"></script>
    <script src="classes/ElementsView.js"></script>

    <script src="classes/MyExporter.js"></script>
    <script src="classes/ElementClipboard.js"></script>
    <script src="classes/UndoRedo.js"></script>
</head>

<body>
    <div id="ribbon">
        <span class="ribbon-window-title"></span>

        <div class="ribbon-tab" id="tab-1">
            <span class="ribbon-title">File</span>
            <div class="ribbon-section">
                <span class="section-title"> Project Section </span>
                <div class="ribbon-button ribbon-button-large" id="btn-new-book">
                    <span class="button-title">New Book</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/new-book.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-open">
                    <span class="button-title">Open</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/open-project.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-save">
                    <span class="button-title">Save</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/save-icon.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-publish">
                    <span class="button-title">Publish</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/export-icon.png" />
                </div>
            </div>
            <div class="ribbon-section">
                <span class="section-title"> Pages Section </span>
                <div class="ribbon-button ribbon-button-large" id="btn-insert-before">
                    <span class="button-title">Insert<br/>Before</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/insert-before.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-insert-after">
                    <span class="button-title">Insert<br/>After</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/insert-after.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-delete-page">
                    <span class="button-title">Delete<br/>Page</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/delete-page.png" />
                </div>
            </div>
        </div>

        <div class="ribbon-tab" id="tab-2">
            <span class="ribbon-title">Tools</span>
            <div class="ribbon-section">
                <span class="section-title"> </span>
                <div class="ribbon-button ribbon-button-large" id="btn-image">
                    <span class="button-title">Image</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/Pictures-icon.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-audio">
                    <span class="button-title">Audio</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/audio-icon.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-video">
                    <span class="button-title">Video</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/video-icon.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-text">
                    <span class="button-title">Text</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/text-icon.png" />
                </div>
            </div>
        </div>

        <div class="ribbon-tab" id="tab-3">
            <span class="ribbon-title">Edit</span>
            <div class="ribbon-section">
                <span class="section-title"> </span>
                <div class="ribbon-button ribbon-button-large" id="btn-copy-element">
                    <span class="button-title">Copy</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/Copy-icon.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-paste-element">
                    <span class="button-title">Paste</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/Paste-icon.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-cut-element">
                    <span class="button-title">Cut</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/cut-icon.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-delete">
                    <span class="button-title">Delete</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/File-Delete-icon.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-undo">
                    <span class="button-title">Undo</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/undo-icon.png" />
                </div>
                <div class="ribbon-button ribbon-button-large" id="btn-redo">
                    <span class="button-title">Redo</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/redo-icon.png" />
                </div>
            </div>
        </div>

        <div class="ribbon-tab" id="tab-4">
            <span class="ribbon-title">Template</span>
            <div class="ribbon-section">
                <span class="section-title"> </span>
                <div class="ribbon-button ribbon-button-large">
                    <span class="button-title">Template 1</span>
                    <img class="ribbon-icon ribbon-normal" src="menu/icon/templates-icon.png" />
                </div>
            </div>
        </div>

        <div class="ribbon-tab file" id="resources-tab">
            <span class="ribbon-title">Resources</span>
            <div class="ribbon-backstage">
                <iframe id="resources-manager" src="MyUploader/index.html" seamless style="width: 100%; height: 100%" onload=""></iframe>

            </div>
        </div>

        <div class="ribbon-tab file red" id="setting-tab">
            <span class="ribbon-title">Setting</span>
            <div class="ribbon-backstage">
                <div id="setting-view">
                    <table>
                        <tr class="setting-preview">
                            <td>Cover Image</td>
                            <td>
                                <img src="" style=" width: 96px; height: 128px;">
                                <button type="button">Choose</button>
                            </td>
                        </tr>
                        <tr class="setting-book-name">
                            <td>Book Name</td>
                            <td><input type="text"></td>
                        </tr>
                        <tr class="setting-target">
                            <td>Target Device</td>
                            <td>
                                <select>
                                    <option selected>iPad/iPad Retina</option>
                                    <option>iPhone 4/4s</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>


    </div>

    <div id="page-preview">
    </div>
    <div id="be-right-column">
        <div class="tab-header-strip">
            <div id="tab-properties" class="tab-header sel">
                <span class="tab-title">Properties</span>
            </div>
            <div id="tab-elements" class="tab-header" >
                <span class="tab-title">Elements</span>
            </div>
        </div>
        <div class="tab-section" id="property-editor">

        </div>
        <div class="tab-section" id="elements-view" style="display: none">

        </div>
    </div>

    <div id="workspace">
        <div id="wrapper">
            <div id="view-panel">

                <!--<div class="page-view">-->
                <!--<img src="img/background.png">-->
                <!--</div>-->
            </div>
        </div>
    </div>


    <div id="dialog-new-page" title="Name of new Page" style="display: none">
        <span>Name: </span> <input type="text">
    </div>

    <div id="dialog-new-book" title="Name of new Book" style="display: none">
        <span>Name: </span><input type="text">
    </div>
    <div id="dialog-confirm-new-book" style="display: none">
        <h4>Discard current book and create a new one ?</h4>
    </div>
    <div id="dialog-confirm-open-book" style="display: none">
        <h4>Discard current book and open the last saved book ?</h4>
    </div>
    <div id="dialog-confirm-delete-page" style="display: none">
        <h4>Are you sure to delete this page ?</h4>
    </div>
    <div id="dialog-confirm-export" style="display: none">
        <h4>Do you want to export to Server and publish ?</h4>
    </div>
    <div id="dialog-confirm-save" style="display: none">
            <h4>Do you want to save this book ?</h4>
            <br/>(Last saved book will be replaced !!!)
    </div>

    <div id="dialog-image-chooser" title="Resources Chooser" style="display: none;">

    </div>

    <div id="#fake-container" style="position: absolute; top: -2000px; left: -3000px; width: 1024px; height: 768px">

    </div>

    <script src="init.js"></script>

</body>
</html>
